<template>
  <el-dialog :title="title"
             :visible="dialogVisible"
             :close-on-click-modal="false"
             append-to-body
             custom-class="trace-dailog"
             @open="onOpenCallback"
             @close="onClose">
    <el-tabs v-model="activeName"
             @tab-click="handleClick"
             type="card">
      <el-tab-pane label="上报单位"
                   name="info">
        <client-detail-info @close-detail="onClose"
                            :clien-info="clientInfo"
                            :mode="mode"
                            ref="cliendetail"></client-detail-info>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="info"
                 @click="onClose"
                 size="small"
                 v-if="activeName === 'info'">取 消</el-button>
      <el-button type="primary"
                 size="small"
                 @click="onChange"
                 v-if="activeName === 'info'">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import ClientDetailInfo from './client-detail-info'
// import Bus from '@/utils/bus'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    clientInfo: Object,
    mode: Number
  },
  data() {
    return {
      activeName: 'info', // tag标签默认选中跟踪记录
      title: '编辑上报单位'
    }
  },
  mounted() {

  },
  methods: {
    // 修改内容提交确定
    onChange() {
      if (this.activeName === 'info') this.$refs.cliendetail.addReported()
    },
    // Tag标签点击事件
    handleClick(tab) {

    },
    onOpenCallback() {
      if (this.mode === 1) {
        this.title = '添加上报单位'
      }
      if (this.mode === 2) {
        this.title = '编辑上报单位'
      }
    },
    onClose() {
      this.$emit('close')
      // 关闭对话框,重置项目信息验证消息
      this.$refs.cliendetail.fromResetField()
    }
  },
  components: {
    ClientDetailInfo
  }
}
</script>
